<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>服务设备</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
    <style>
        table input {
            border: none;
            width: 100%;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        input[type=text], input[type=tel], input[type=number], select {
            box-sizing: border-box;
            border-width: 0px;
            border-style: none;
            padding-right: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            padding-left: 6px;
        }

        input[type=text], input[type=tel], input[type=number], select {
            height: 24px;
            width: 100%;
            border: none;
            outline: none;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
<section class="content" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div id="div" style="margin-top: 12px">
        <div>
            <div class="box-body no-padding iframeH2" style="overflow: auto;margin-left: -10px;margin-top:-20px"
                 id="scrollDiv">
                <div id="progress" class="wyui-progress"></div>
                <table class="table  table-bordered text-center" id="week">
                    <th colspan="2" style="min-width: 300px;height: 30px;background-color: yellow;" class="tableTitle"><span
                            style="text-align:center;height:18px;color:black;" class="tableTitle">设备信息</span></th>
                    <tr class="td-row2 td-value" style="height:30px;">
                        <td style="width: 25%;color:black;background-color:#F8F8F8">品牌</td>
                        <td style="width: 75%;">
                            <select id="testBran" v-model="selectBran" @change="getType">
                                <option value="请选择品牌" v-if="type=='add'">请选择品牌</option>
                                <option v-for="itemB in itemsBran" v-bind:value="itemB.id">{{itemB.name}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="td-row2 td-value" style="height:30px;">
                        <td style="color:black;background-color:#F8F8F8">设备类型</td>
                        <td>
                            <select id="testType" v-model="selectType" @change="getMod">
                                <option value="请选择设备类型 v-if=" type=='add'">请选择设备类型</option>
                                <option v-for="itemT in itemsType" v-bind:value="itemT.id">{{itemT.name}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="td-row2 td-value" style="height:30px">
                        <td style="color:black;background-color:#F8F8F8">型号</td>
                        <td><select id="testMod" v-model="selectMod" v-if="type=='edit'">
                            <option value="请选择型号">请选择型号</option>
                            <option v-for="itemMo in itemsMod" v-bind:value="itemMo.id">{{itemMo.modelName}}</option>
                        </select>
                            <input type="text" id="model" v-else>
                        </td>
                    </tr>
                    <!--<tr id="config" class="td-row2 td-value" style="height:30px;display: none;">
                        <td style="color:black;background-color:#F8F8F8">规格配置</td>
                        <td><select  v-model="customer.config"  >
                            <option value="请选择规格配置">请选择规格配置</option>
                            <option value="大挖机">大挖机</option>
                            <option value="中挖机">中挖机</option>
                            <option value="小挖机">小挖机</option>
                        </select>
                        </td>
                    </tr>-->
                    <tr class="td-row2 td-value" style="height:30px">
                        <td style="color:black;background-color:#F8F8F8">限价(元)</td>
                        <td><input type="text" id="price" v-model="customer.price"></td>
                    </tr>
                    <tr class="td-row2 td-value" style="height:30px">
                        <td style="color:black;background-color:#F8F8F8">吨位(吨)</td>
                        <td><input type="text" id="tonConfig" v-model="customer.tonConfig"></td>
                    </tr>
                    <tr class="td-row2 td-value" style="height:30px">
                        <td rowspan="2" style="color:black;background-color:#F8F8F8;line-height: 48px;">备注</td>
                        <td rowspan="2">
                            <input type="text" id="remark" v-model="customer.remark">
                        </td>
                    </tr>
                </table>
                <table class="table  table-bordered text-center">
                    <th colspan="6" style="position: relative;width:100%;height: 30px;background-color:yellow;" class="tableTitle"><span
                            style="text-align:center;height:18px;color: black;" class="tableTitle">铲斗配置</span>
                        <span class="span-a-btn">
                <a href="javascript:void(0);" class="a-btn" style="position: absolute;right: 5px;color:black;"
                   @click="addRow('bucketList','bucket')">添加铲斗配置</a>
                </span>
                    </th>

                    <tr class="td-row2 td-value" style="height:30px" v-for="(item,i) in bucketList">
                        <td style="color:black;background-color:#F8F8F8">配置号</td>
                        <td style="position: relative">
                            <input type="text" v-model="item.configurationNo">
                        </td>
                        <td style="color:black;background-color:#F8F8F8">斗容</td>
                        <td style="position: relative">
                            <input type="text" v-model="item.bucketCapacity">
                        </td>
                        <td style="color:black;background-color:#F8F8F8">铲斗类型</td>
                        <td style="position: relative">
                            <input type="text" v-model="item.bucketCondition">
                            <i class="fa fa-fw fa-minus"
                               style="position: absolute;right: 10px;top:12px;cursor: pointer;color:red;"
                               @click="delRow('bucketList',i)"></i>
                        </td>
                    </tr>
                </table>

                <!--<div class="operate" style="display: flex;justify-content: center;">-->
                <!--<input type="button" id="save" class="btn btn-primary btn-sm oaBtn" @click="save(customer.fkModelId)" value="保存" style="margin-top: 5px;width:60px;height: 30px;margin-right: 5px;">-->
                <!--<input type="button" id="add" class="btn btn-primary btn-sm oaBtn" @click="add" value="添加"-->
                <!--style="margin-top: 5px;width:60px;height: 30px;margin-right: 5px;">-->
                <!--<input type="button" value="取消" class="btn btn-primary btn-sm oaBtn" id="getBy" @click=close() style="margin-top: 5px;width:60px;height: 30px">-->
                <!--</div>-->
                <div class="south no-print" style="height:50px;line-height:50px;text-align:center;">
                    <input type="button" id="save" class="btn btn-primary btn-sm oaBtn"
                           @click="save(customer.fkModelId)" value="保存">
                    <input type="button" id="add" class="btn btn-primary btn-sm oaBtn" @click="add" value="添加">
                    <input type="button" value="取消" class="btn btn-primary btn-sm oaBtn" id="getBy" @click=close()>
                </div>
            </div>
        </div>

    </div>

</section>

</body>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<script src="Template.js?t=42e28def"></script>

<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=0c4d95a9"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: '#app',
        data: {
            bucketList: [
                new Template.bucket()
            ],
            customer: {
                id: '',
                fkBrandId: '',
                fkDeviceTypeId: '',
                fkModelId: '',
                deviceTypeName: '',
                brandName: '',
                modelName: '',
                price: '',
                remark: '',
                config: ''
            },
            selectType: '请选择设备类型',
            selectBran: '请选择品牌',
            selectMod: '请选择型号',
            templateDeviceTypeId: '',
            templateBrandId: '',
            templateModelId: '',
            itemsBran: [],
            itemsType: [],
            itemsMod: [],
            type: "",
        },
        methods: {
            getType: function () {
                var that = this;
                //var s = that.selectType;
                that.selectType = "请选择设备类型";
                that.selectMod = "请选择型号";
                //var data = {'deviceTypeId': s.toString()};
                $.wyui.postMethod('/deviceBrand/getDeviceTypeList.json', {}, function (r) {
                    console.log(r);
                    $("#selBran").hide();
                    $("#selType").hide();
                    that.itemsType = r.devicetypes;
                });
            },
            getBran: function () {
                var that = this;
                that.selectBran = "请选择品牌";
                that.selectMod = "请选择型号";
                that.itemsMod = "";
                $.wyui.postMethod('/deviceBrand/getBrandList2.json', {}, function (r) {
                    console.log(r);
                    $("#selBran").hide();
                    $("#selMod").hide();
                    that.itemsBran = r.brands;
                })
            },
            addRow: function (prop, template) {
                console.log(prop);
                this[prop].push(new Template[template]());
            },
            delRow: function (prop, index) {
                this[prop].splice(index, 1);
            },
            getMod: function () {
                var that = this;
                var s = that.selectType;
                var d = that.selectBran;
                /*if(s=="1"){//挖掘机
                    $("#config").show();
                }else{
                    $("#config").hide();
                }*/
                that.selectMod = "请选择型号";
                var data = {'brandId': d, 'deviceTypeId': s};
                $.wyui.postMethod('/deviceModel/getModelListByBrandId.json', data, function (r) {
                    console.log(r);
                    $("#selMod").hide();
                    that.itemsMod = r.models;
                })
            },
            save: function (id) {
                var that = this;
                that.customer.brandName = $("#testBran option:selected").text();
                that.customer.deviceTypeName = $("#testType option:selected").text();
                that.customer.modelName = $("#testMod option:selected").text();
                that.customer.price = $("#price").val();
                that.customer.fkDeviceTypeId = that.selectType;
                that.customer.fkBrandId = that.selectBran;
                that.customer.fkModelId = that.selectMod;
                if (that.selectType == "请选择设备类型") {
                    that.customer.fkDeviceTypeId = that.templateDeviceTypeId;
                }
                if (that.selectBran == "请选择品牌") {
                    that.customer.fkBrandId = that.templateBrandId;
                }
                if (that.selectMod == "请选择型号") {
                    that.customer.fkModelId = that.templateModelId;
                }
                if ("请选择设备类型" == that.customer.deviceTypeName) {
                    alert("请选择设备类型")
                    return;
                } else if ("请选择品牌" == that.customer.brandName) {
                    alert("请选择品牌")
                    return;
                } else if ("请选择型号" == that.customer.modelName) {
                    alert("请选择型号")
                    return;
                } else {
                    $.wyui.postMethod('/deviceModel/update.json', trimRN({
                        id: id,
                        brandId: that.customer.fkBrandId,
                        modelName: that.customer.modelName,
                        lowestPrice: that.customer.price,
                        deviceTypeId: that.customer.fkDeviceTypeId,
                        remark: that.customer.remark,
                        config: that.customer.config,
                        tonConfig: that.customer.tonConfig
                    }), function (r) {
                        for (var i = 0; i < that.bucketList.length; i++) {
                            that.bucketList[i].modelId = id;
                        }
                        $.wyui.postMethod('/deviceBucket/add.json', that.bucketList, function (r) {
                             console.log(r);
                            if ($.wyui.page.urlParams.closeType == "edit") {
                                alert("保存成功");
                                top.refreshTabByName("品牌型号管理", "no");
                                parent.refresh("close");
                                api.close();
                            } else {
                                alert("保存成功");
                                //var $iframe = top.findIframeByName("品牌类型型号");
                                //$iframe[0].contentWindow.refresh();
                                top.refreshTabByName("品牌型号管理", "no");
                                api.close();
                            }


                        })

                    });
                }
            },
            add: function () {
                var that = this;
                that.customer.brandName = $("#testBran option:selected").text();
                that.customer.deviceTypeName = $("#testType option:selected").text();
                that.customer.modelName = $("#model").val();
                that.customer.price = $("#price").val();
                that.customer.remark = $("#remark").val();
                that.customer.fkDeviceTypeId = that.selectType;
                that.customer.fkBrandId = that.selectBran;
                that.customer.fkModelId = that.selectMod;
                if (that.selectType == "请选择设备类型") {
                    that.customer.fkDeviceTypeId = that.templateDeviceTypeId;
                }
                if (that.selectBran == "请选择品牌") {
                    that.customer.fkBrandId = that.templateBrandId;
                }
                if ("请选择设备类型" == that.customer.deviceTypeName || "" == that.customer.deviceTypeName) {
                    alert("请选择设备类型")
                    return;
                } else if ("请选择品牌" == that.customer.brandName) {
                    alert("请选择品牌")
                    return;
                } else if ("" == that.customer.modelName) {
                    alert("请输入型号")
                    return;
                } else if ("" == that.customer.price) {
                    alert("请输入限价")
                    return;
                } else {
                    $.wyui.postMethod('/deviceModel/add.json', trimRN({
                        brandId: that.customer.fkBrandId,
                        modelName: that.customer.modelName,
                        lowestPrice: that.customer.price,
                        deviceTypeId: that.customer.fkDeviceTypeId,
                        remark: that.customer.remark,
                        config: that.customer.config,
                        tonConfig: that.customer.tonConfig
                    }), function (r) {
                        console.log(r.isOk);
                        for (var i = 0; i < that.bucketList.length; i++) {
                            that.bucketList[i].modelId = r.isOk;
                        }
                        $.wyui.postMethod('/deviceBucket/add.json', that.bucketList, function (r) {
                            console.log(r);
                            if ($.wyui.page.urlParams.closeType == "close") {
                                alert("保存成功");
                                top.refreshTabByName("品牌型号管理", "no");
                                // parent.refresh("close");
                                api.close();
                            } else {
                                alert("保存成功");
                                top.refreshTabByName("品牌型号管理", "no");
                                api.close();
                                //api.close();
                            }

                        })

                    });
                }
            },
            close: function () {
                api.close();
            },
            showDatePicker: function (e, index) {
                var that = this;
                console.log(index)
                WdatePicker({
                    onpicked: function (dp) {
                        that.customer.years = dp.cal.getNewDateStr();
                        return true;
                    }
                });
                $(e.target).blur();
            },
        },
        mounted: function () {
            var that = this;
            if ($.wyui.page.urlParams.closeType == "close") {
                $.wyui.postMethod('/deviceBrand/getBrandList2.json', {}, function (r) {
                    that.itemsBran = r.brands;
                    that.selectBran = $.wyui.page.urlParams.brandId;
                })
                $.wyui.postMethod('/deviceBrand/getDeviceTypeList.json', {}, function (r) {
                    that.itemsType = r.devicetypes;
                });
                that.selectType = $.wyui.page.urlParams.deviceTypeId;

            }

            if ("edit" == $.wyui.page.urlParams.type) {
                $.wyui.postMethod('/device/getDeviceById.json', {id: $.wyui.page.urlParams.id}, function (r) {
                    that.customer = r
                    that.selectType = r.fkDeviceTypeId;
                    that.selectBran = r.fkBrandId;
                    that.selectMod = r.fkModelId;
                    that.templateDeviceTypeId = r.fkDeviceTypeId;
                    that.templateBrandId = r.fkBrandId;
                    that.templateModelId = r.fkModelId;
                    that.type = "edit";
                    /*  if(r.fkDeviceTypeId=='1'){
                          $("#config").show();
                      }*/
                    $.wyui.postMethod('/deviceBucket/getListBymodelId.json', {modelId: r.fkModelId}, function (r) {
                        console.log(r);
                        that.bucketList = r.buckets;
                    })
                    $.wyui.postMethod('/deviceBrand/getBrandList2.json', {}, function (r) {
                        console.log(r);
                        that.itemsBran = r.brands;
                    })
                    $.wyui.postMethod('/deviceBrand/getDeviceTypeList.json', {}, function (r) {
                        console.log(r);
                        that.itemsType = r.devicetypes;
                    });
                    var data = {'brandId': that.selectBran, 'deviceTypeId': that.selectType};
                    $.wyui.postMethod('/deviceModel/getModelListByBrandId.json', data, function (r) {
                        console.log(r);
                        that.itemsMod = r.models;
                    })
                })
                $("#add").hide();
            } else {
                that.type = "add";
                $("#save").hide();
                $.wyui.postMethod('/deviceBrand/getBrandList2.json', {}, function (r) {
                    console.log(r);
                    that.itemsBran = r.brands;
                })
            }
        }

    })
</script>

</html>